d3plus-plot

d3plus-plot

A reusable javascript x/y plot built on D3.

Installing

If you use NPM, npm install d3plus-plot. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom bundle using Rollup or your preferred bundler. You can also load directly from d3plus.org:

<script src="https://d3plus.org/js/d3plus-plot.v0.3.full.min.js"></script>

Getting Started

d3plus-plot combines the abstract Viz class found in d3plus-viz with the axes in d3plus-axis to create a standard x/y plot. In addition to a lot of automatic formatting and positioning, the Viz class also provides mouse events and tooltips.

var data = [
  {id: "alpha", x: 4, y:  7},
  {id: "beta",  x: 5, y:  2},
  {id: "gamma", x: 6, y: 13}
];

Given some data points, we can create a plot very easily:

new d3plus.Plot()
  .data(data)
  .groupBy("id")
  .render();

This creates an x/y plot using the default shape (Circle). The default shape can be overridden using the .shape( ) accessor method, as well as using the many shorthand Classes for specific types of charts (see examples below).

Click here to view this example live on the web.

More Examples

• Getting Started
• Flipping a Stacked Area Chart
• Stacked Area Chart
• Area Chart
• Line Plot

API Reference

Classes

AreaPlot ⇐ Plot

LinePlot ⇐ Plot

Plot ⇐ Viz

StackedArea ⇐ Area

AreaPlot ⇐ Plot

Kind: global class
Extends: Plot

new AreaPlot()

Creates an area plot based on an array of data.

Example (the equivalent of calling:)

new d3plus.Plot()
  .baseline(0)
  .discrete("x")
  .shape("Area")

LinePlot ⇐ Plot

Kind: global class
Extends: Plot

new LinePlot()

Creates a line plot based on an array of data.

Example (the equivalent of calling:)

new d3plus.Plot()
  .discrete("x")
  .shape("Line")

Plot ⇐ Viz

Kind: global class
Extends: Viz

• Plot ⇐ Viz
  • new Plot()
  • .baseline([value])
  • .discrete([value])
  • .stacked([value])
  • .stackOffset([value])
  • .stackOrder([value])
  • .x([value])
  • .xConfig([value])
  • .xDomain([value])
  • .y([value])
  • .yConfig([value])
  • .yDomain([value])

new Plot()

Creates an x/y plot based on an array of data.

Plot.baseline([value])

If value is specified, sets the baseline for the x/y plot and returns the current class instance. If value is not specified, returns the current baseline.

Kind: static method of Plot

Param	Type
[value]	Number

Plot.discrete([value])

If value is specified, sets the discrete axis to the specified string and returns the current class instance. If value is not specified, returns the current discrete axis.

Kind: static method of Plot

Param	Type
[value]	String

Plot.stacked([value])

If value is specified, toggles shape stacking and returns the current class instance. If value is not specified, returns the current stack value.

Kind: static method of Plot

Param	Type	Default
[value]	Boolean	false

Plot.stackOffset([value])

If value is specified, sets the stack offset and returns the current class instance. If value is not specified, returns the current stack offset function.

Kind: static method of Plot

Param	Type	Default
[value]	function | String	"none"

Plot.stackOrder([value])

If value is specified, sets the stack order and returns the current class instance. If value is not specified, returns the current stack order function.

Kind: static method of Plot

Param	Type	Default
[value]	function | String	"none"

Plot.x([value])

If value is specified, sets the x accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current x accessor.

Kind: static method of Plot

Param	Type
[value]	function | Number

Plot.xConfig([value])

If value is specified, sets the config method for the x-axis and returns the current class instance. If value is not specified, returns the current x-axis configuration.

Kind: static method of Plot

Param	Type
[value]	Object

Plot.xDomain([value])

If value is specified, sets the x domain to the specified array and returns the current class instance. If value is not specified, returns the current x domain. Additionally, if either value of the array is undefined, it will be calculated from the data.

Kind: static method of Plot

Param	Type
[value]	Array

Plot.y([value])

If value is specified, sets the y accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current y accessor.

Kind: static method of Plot

Param	Type
[value]	function | Number

Plot.yConfig([value])

If value is specified, sets the config method for the y-axis and returns the current class instance. If value is not specified, returns the current y-axis configuration. Note:* If a "domain" array is passed to the y-axis config, it will be reversed.

Kind: static method of Plot

Param	Type
[value]	Object

Plot.yDomain([value])

If value is specified, sets the y domain to the specified array and returns the current class instance. If value is not specified, returns the current y domain. Additionally, if either value of the array is undefined, it will be calculated from the data.

Kind: static method of Plot

Param	Type
[value]	Array

StackedArea ⇐ Area

Kind: global class
Extends: Area

new StackedArea()

Creates a stacked area plot based on an array of data.

Example (the equivalent of calling:)

new d3plus.Area()
  .stacked(true)

_{Documentation generated on Mon, 05 Dec 2016 04:05:21 GMT}